<template>
  <a-drawer :visible="modalVisible" title="报价单详情" width="70%" @close="handleClose">
    <a-card :bordered="false">
      <detail-list title="采购信息">
        <detail-list-item term="采购商">{{purchase.companyName}}</detail-list-item>
        <detail-list-item term="截止日期">{{purchase.dueDate}}</detail-list-item>
        <detail-list-item term="物料分类">{{purchase.categoryName}}</detail-list-item>
        <detail-list-item term="采购类型">{{purchase.purchaseTypeTitle}}</detail-list-item>
        <detail-list-item term="交货期">自下单后{{purchase.deliveryDay}}天内交货至指定地址</detail-list-item>
        <detail-list-item term="期望收货日期">{{purchase.deliveryBeginDate}}至{{purchase.deliveryEndDate}}</detail-list-item>
        <detail-list-item term="收货地">{{purchase.areaName}}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <detail-list title="报价信息">
        <detail-list-item term="供应商">{{purchase.purchaseCompanyName}}</detail-list-item>
        <detail-list-item term="所在地区">{{purchase.purchaseAreaName}}</detail-list-item>
        <detail-list-item term="联系人">{{purchase.linkMan}}</detail-list-item>
        <detail-list-item term="联系电话">{{purchase.telephone}}</detail-list-item>
        <detail-list-item term="备注">{{purchase.remark}}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <div class="title">报价明细</div>
      <a-table style="margin-bottom: 24px" row-key="id" :columns="goodsColumns" :dataSource="detailsList" :pagination="false">
        <template slot-scope="text, record" slot="fileList">
          <ul class="fujian">
            <li v-for="file in record.fileList"><a :href="file.url">{{file.name}}</a></li>
          </ul>
        </template>
      </a-table>
    </a-card>
  </a-drawer>
</template>
<script>
  import { STable } from '@/components'
  import DetailList from '@/components/tools/DetailList'

  const DetailListItem = DetailList.Item
  export default {
    components: {
      DetailList,
      DetailListItem,
      STable
    },
    data () {
      return {
        //列表初始化查询参数
        queryParam: {
          params: {
            purchaseId: ''
          }

        },
        purchase: {},
        detailsList: [],
        modalVisible: false,
        goodsColumns: [
          {
            title: '物料名称',
            dataIndex: 'detailedName',
            width: 300
          },
          {
            title: '物料描述',
            dataIndex: 'detailedDesc'
          },
          {
            title: '数量',
            dataIndex: 'detailedNum'
          },
          {
            title: '单位',
            dataIndex: 'detailedUnit',
            align: 'right'
          },
          {
            title: '附件',
            align: 'right',
            scopedSlots: { customRender: 'fileList' }
          }
        ],

        scheduleColumns: [
          {
            title: '报价时间',
            dataIndex: 'createTime'
          },
          {
            title: '供应商',
            dataIndex: 'companyName',
            key: 'rate'
          },
          {
            title: '所在地区',
            dataIndex: 'areaName'
          },
          {
            title: '报价金额',
            dataIndex: 'amount'
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    filters: {
      statusFilter (status) {
        const statusMap = {
          'processing': '进行中',
          'success': '完成',
          'failed': '失败'
        }
        return statusMap[status]
      }
    },
    methods: {
      getDetails (quotationId) {
        this.http.get(this, {
          url: this.api.quotation.detail,
          params: {
            'quotationId': quotationId
          },
          success: function (me, data) {
            me.purchase = data
            me.detailsList = data.detailsList
          }
        })
        this.modalVisible = true
      },
      handleClose () {
        this.modalVisible = false
      }
    },
    computed: {
      title () {
        return this.$route.meta.title
      }
    }

  }
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0, 0, 0, .85);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
  }
</style>
